<template>
  <div class="demo">
    <div class="demo-title">分组</div>
    <div class="demo-content">
      <Space>
        <Select v-model:value="value" style="width: 200px" @change="handleChange">
          <Select.OptGroup>
            <template #label>
              <span><UserOutlined />Manager</span>
            </template>
            <Select.Option value="jack">Jack</Select.Option>
            <Select.Option value="lucy">Lucy</Select.Option>
          </Select.OptGroup>
          <Select.OptGroup label="Engineer">
            <Select.Option value="Yiminghe">yiminghe</Select.Option>
            <Select.Option value="Yiminghe1">yiminghe1</Select.Option>
          </Select.OptGroup>
        </Select>
        <Select
          v-model:value="value"
          :options="options"
          style="width: 200px"
          @change="handleChange"
        />
      </Space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { UserOutlined } from '@ant-design/icons-vue';
  import Space from '@sscd/space';
  import Select from '@sscd/select';
  import type { SelectProps } from '@sscd/select';
  const value = ref(['lucy']);
  const handleChange = (val) => console.log(`selected ${val}`);
  const options = ref<SelectProps['options']>([
    {
      label: 'Manager',
      options: [
        { value: 'jack', label: 'Jack' },
        { value: 'lucy', label: 'Lucy' },
      ],
    },
    {
      label: 'Engineer',
      options: [{ value: 'yiminghe', label: 'Yiminghe' }],
    },
  ]);
</script>
